<template>
  <div
    class="square-container"
    @mousemove="handleMouseMove"
    @mouseleave="handleMouseLeave"
  >
    <div
      v-for="(square, index) in squares"
      :key="index"
      @click="jump(square)"
      class="square"
      :style="{
        backgroundColor: 'white' || square.layout.backgroundcolor,
        backgroundImage: `url(${square.urlobj.icon})`,
        transform: `translateX(${transitions[index]}px) scale(${scales[index]})`,
      }"
    ></div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, onMounted, onUnmounted, computed } from "vue";
import square from "../../config/square.js";

// 定义方块的背景颜色
const squares = ref(
  square.filter((item) => {
    return item;
  })
);
const store = useStore();

//点击跳转的方式
const newtab = computed(() => store.getters["getnewtab"]);
const jump = (element) => {
  const searchUrl = element.urlobj.url;
  if (newtab.value) {
    window.open(searchUrl, "_blank");
    return;
  }
  window.location.href = searchUrl;
};

// 定义最大和最小缩放比例以及效果范围
const maxScale = 1.7;
const minScale = 1;
const rangeEffect = 130;
const gap = 20;

// 存储每个方块的缩放比例和位移
const scales = ref([]);
const transitions = ref([]);

// 获取容器元素
const squareContainer = ref(null);

// 更新方块的缩放和位移
const updateSquare = (mouseX) => {
  // 第一阶段：计算所有方块的缩放比例
  const newScales = [];
  squares.value.forEach((square, index) => {
    const rect = squareContainer.value.children[index].getBoundingClientRect();
    const center = rect.left + rect.width / 2;
    const distance = Math.abs(mouseX - center);
    const scale =
      distance < rangeEffect
        ? maxScale - (distance / rangeEffect) * (maxScale - minScale)
        : minScale;
    newScales[index] = scale;
  });
  scales.value = newScales; // 批量更新缩放值

  // 第二阶段：计算所有方块的位移
  const newTransitions = [];
  squares.value.forEach((square, index) => {
    let move = 0;
    // 前一个方块放大带来的右移
    if (index > 0) {
      move +=
        ((newScales[index - 1] - 1) *
          squareContainer.value.children[index - 1].offsetWidth) /
        2;
    }
    // 后一个方块放大带来的左移补偿
    if (index < squares.value.length - 1) {
      move -=
        ((newScales[index + 1] - 1) *
          squareContainer.value.children[index].offsetWidth) /
        2;
    }
    newTransitions[index] = move;
  });
  transitions.value = newTransitions; // 批量更新位移值
};

// 处理鼠标移动事件
const handleMouseMove = (event) => {
  const mouseX = event.clientX;
  updateSquare(mouseX);
};

// 处理鼠标离开事件
const handleMouseLeave = () => {
  scales.value = squares.value.map(() => minScale);
  transitions.value = squares.value.map(() => 0);
};

// 更新容器大小
const updateContainerSize = () => {
  let totalWidth = 0;
  let maxHeight = 0;
  const numberOfGaps = squares.value.length - 1;
  const totalGapsWidth = gap * numberOfGaps;

  squares.value.forEach((square, index) => {
    const rect = squareContainer.value.children[index].getBoundingClientRect();
    totalWidth += rect.width;
    maxHeight = Math.max(maxHeight, rect.height);
  });

  const scaledWidth = totalWidth * maxScale + totalGapsWidth;
  const scaledHeight = maxHeight * maxScale;

  squareContainer.value.style.width = `${scaledWidth}px`;
  squareContainer.value.style.height = `${scaledHeight}px`;
};

// 挂载时初始化
onMounted(() => {
  squareContainer.value = document.querySelector(".square-container");
  updateContainerSize();
  window.addEventListener("resize", updateContainerSize);
});

// 卸载时清理
onUnmounted(() => {
  window.removeEventListener("resize", updateContainerSize);
});
</script>

<style scoped>
.square-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 50px;
  margin: auto;
  padding: 5px;
  gap: 20px;
  overflow: hidden;
}

.square {
  width: 40px;
  height: 40px;
  border-radius: 25%;
  transition: transform 0.1s ease;
  position: relative;
  background-color: inherit;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.square::after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 50px;
  background: inherit;
  transform: scaleY(-1);
  opacity: 0.4;
  filter: blur(8px);
  z-index: -1;
}
</style>
